<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
    <style>
      table {
        width: 600px;
        cursor: pointer;
      }

      table td {
        text-align: center;
      }

      table th {
        background-color: blueviolet;
      }

      table tr {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div id="dv">
      请输入姓名:
      <input type="text" value="" id="uname" />
      <br />
      请输入邮箱:
      <input type="text" value="" id="email" />
    </div>

    <input type="button" value="添加" id="btn" />
    <table border="1" cellpadding="0" cellspacing="0" id="tb">
      <thead>
        <tr>
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody id="tbd">
        <tr>
          <td>小黑</td>
          <td>xiaohei@126.com</td>
        </tr>
      </tbody>
    </table>
    <script>
      var tr = document.getElementsByTagName('tr')
      var uname = document.getElementById('uname')
      var email = document.getElementById('email')
      var btn = document.getElementById('btn')
      var tbd = document.getElementById('tbd')
      btn.onclick = function () {
        if (uname.value == '' || email.value == '') {
          return alert('输入框不能为空')
        }
        var trl = document.createElement('tr')
        tbd.appendChild(trl)
        var tdl = document.createElement('td')
        tdl.innerHTML = uname.value
        trl.appendChild(tdl)
        var tdr = document.createElement('td')
        tdr.innerHTML = email.value
        trl.appendChild(tdr)
        uname.value = ''
        email.value = ''
      }
    </script>
  </body>
</html>
